import React, {Component} from 'react';
import {AppRegistry, Image, StyleSheet, Text, View} from 'react-native';
const MOCKED_MOVIES_DATA = [
    {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];

var API_KEY = '7waqfqbprs7pajbz28mqf6vz';
var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
var PAGE_SIZE = 25;
var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;
var REQUEST_URL = API_URL + PARAMS;

// this.state;

function getInitialState() {
    return {
        movies: [],
    };
};

function componentDidMount(th) {
    fetchData(th);
};

function fetchData(th) {
    fetch(REQUEST_URL)
        .then((response) => response.json())
        .then((responseData) => {
            th.setState({
                movies: responseData,
            });
        })
        .done();
};

export default class RNDemo2 extends Component {

    constructor() {
        super()
        this.state = {
            state: false
        }
    }

    render() {
        // this.state.movies=false;
        if (!this.state.movies) {
            componentDidMount(this);
            return this.renderLoadingView();
        }

        var movie = this.state.movies[0];
        return this.renderMovie(movie);
    };

    renderLoadingView() {
        return (
            <View style={styles.container}>
                <Text>
                    Loading movies...
                </Text>
            </View>
        );
    };

    renderMovie(movie) {
        return (
            <View style={styles.container}>
                {/*<Image*/}
                    {/*source={{uri: movie.posters.thumbnail}}*/}
                    {/*style={styles.thumbnail}*/}
                {/*/>*/}
                {/*<View style={styles.rightContainer}>*/}
                    {/*<Text style={styles.title}>{movie.title}</Text>*/}
                    {/*<Text style={styles.year}>{movie.year}</Text>*/}
                {/*</View>*/}

                <Text>movie</Text>
            </View>
        )
    };

}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f4f5c5',
        flexDirection: 'row',  //水平布局

    },
    thumbnail: {
        width: 54,
        height: 86
    },
    rightContainer: {
        flex: 1, //伸缩能力, android中的weight
        backgroundColor: "#ffd5b7",
        justifyContent: 'center',// 如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间
        alignItems: 'center', //控件中内容的布局方式,将当前行上的弹性元素对齐
    },
    title: {
        fontSize: 20,
        marginBottom: 8,
        textAlign: 'center',
    },
    year: {
        textAlign: 'center',
    }
});

function click() {
    alert('123');
}

AppRegistry.registerComponent('RNDemo2', () => RNDemo2);
